import Vue from 'vue'
// 抹平不同浏览器差异
// 使用方式：1、下载 npm normailze;2、导入
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
// 引入element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 国际化语言包
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
// 引入导航守卫
import '@/permission' // permission control
// 引入自定义组件
import directive from '@/directive'
// 引入需要全局注册的的过滤器
import filterList from '@/filters/index.js'
// 全局注册自定义组件
import libs from '@/components/libs/libs'
// 导入打印插件组件
import Print from 'vue-print-nb'
// 导入注册好的中英文包,并挂载再vue实例上
import i18n from '@/lang/index.js'
import ElementLocale from 'element-ui/lib/locale'
// 注册打印插件
Vue.use(Print)
Vue.use(libs)

// 遍历对象逐一注册过滤器
Object.keys(filterList).forEach(item => {
  // 过滤器名字，对象
  Vue.filter(item, filterList[item])
})
// 循环变量自定义组件对象
// for (const key in directive) {
//   Vue.directive(key, directive[key])
// }
Object.keys(directive).forEach(item => {
  Vue.directive(item, directive[item])
})

// 创建一个Vue的中间件，用来兄弟组件之间传值
Vue.prototype.$bus = new Vue()
// 循环对象方法
// Object.key(obj)// 表示循环对象obj，返回一个数组，数组中包含对象的每一项属性名
// Object.values(obj)// 表示循环对象，返回一个数组，数组中结果为对象的每一项值
// Object.entries(obj)//返回一个数组，把对象的每一项用数组装起来
// 注册全局自定义指令
// Vue.directive('gobalimageerror', {
//   bind() {}, // 渲染前，类似于beforemounted
//   // inserted表示渲染后的结果---类似于mounted,当前指令所在dom添加到父节点时执行
//   inserted(dom, obj, vnode) {
//   // dom表示当前指令绑定的对象
//   // 错误监听事件：当这个对象发生错误的之后的一些结果
//     dom.onerror = () => {
//       dom.src = obj.value
//     }
//   },
//   update() {}, // 跟新时，不一定是当前组件跟新会触发，页面其他更新就会触发这个，会产生oldvalue
//   componentUpdated(dom, obj, vnode) {
//     // dom.src = obj.value
//   }, // 组件完成跟新时
//   // 指令销毁时解除错误监听
//   unbind(dom, obj, vnode) {
//     dom.onerror = ''
//   }
// })

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
// 如果当前环境是生产环境，就是用mock
// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

// set ElementUI lang to EN
// 将element-ui与i8n建立联系
Vue.use(ElementUI, ElementLocale.i18n((key, value) => i18n.t(key, value)))
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  i18n: i18n,
  render: h => h(App)
})
